<template>
  <div class="middle">
    <div class="center">
      <div class="clearfix">
        <a class="left">
          <img src="../../assets/images/logo.svg" />
        </a>
        <div class="right searchBox clearfix position">
          <span class="positionLeft"></span>
          <div class="inputBox">
            <input placeholder="请输入要搜索的内容"/>
          </div>
          <span class="positionRight searchBtn">搜索</span>
        </div>
      </div>
      <div class="clearfix position listBox">
        <div class="menu positionLeft">
          <div class="top">
            <i></i>
            <span>全部商品分类</span>
          </div>
          <ul class="menuList positionLeft">
            <li v-for="(item, index) in goodsList" :key="index">
              <i class=""></i>
              <a href="javascript:;">{{ item.title }}</a>
            </li>
          </ul>
        </div>
        <ul class="nav clearfix">
          <li v-for="(item, index) in navList" :key="index" :class="{left: true,active: index===0}"><a href="javascript:;">{{item.title}}</a></li>
        </ul>
        <img class="positionRight qrcode" src="../../assets/images/qrcode.svg" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Middle',
  data () {
    return {
      navList: [
        {
          id: 1,
          url: 'javascript:;',
          title: '首页'
        },
        {
          id: 2,
          url: 'javascript:;',
          title: '闪购'
        },
        {
          id: 3,
          url: 'javascript:;',
          title: '限时购'
        },
        {
          id: 4,
          url: 'javascript:;',
          title: '团购'
        },
        {
          id: 5,
          url: 'javascript:;',
          title: '大包装'
        },
        {
          id: 6,
          url: 'javascript:;',
          title: '自定义'
        }
      ],
      goodsList: [
        {
          id: 1,
          title: '综合商城'
        },
        {
          id: 2,
          title: '医药健康'
        },
        {
          id: 3,
          title: '旅行票务'
        },
        {
          id: 4,
          title: '服饰鞋包'
        },
        {
          id: 5,
          title: '数码家电'
        },
        {
          id: 6,
          title: '美容化妆'
        },
        {
          id: 7,
          title: '母婴用品'
        },
        {
          id: 8,
          title: '珠宝首饰'
        },
        {
          id: 9,
          title: '运动户外'
        },
        {
          id: 10,
          title: '数码家电'
        }
      ]
    }
  }
}
</script>

<style lang='scss' scoped>
  .middle{
    background: #fff;
    padding: 20px 0 0;
    .searchBox{
      width: 600px;
      height: 50px;
      border: 2px solid #2499ef;
      .positionLeft{
        width: 50px;
        height: 50px;
      }
      .inputBox{
        display: block;
        margin: 0 150px 0 50px;
        height: 50px;
        input{
          width: 100%;
          line-height: 50px;
          outline: none;
        }
      }
      .searchBtn{
        display: block;
        width: 150px;
        line-height: 50px;
        text-align: center;
        color: #fff;
        background: #2499ef;
      }
    }
    .listBox{
      padding-top: 40px;
      .menu{
        top: 40px;
        .top{
          line-height: 55px;
          background: #2499ef;
          color: #fff;
          width: 205px;
          padding-left: 20px;
          height: 55px;
          font-size: 16px;
          i{
            width: 40px;
            height: 40px;
            background: url(../../assets/images/list.svg) no-repeat center;
          }
          &>*{
            display: inline-block;
            vertical-align: middle;
          }
        }
        .menuList{
          top: 100%;
          height: 390px;
          width: 205px;
          padding-left: 20px;
          background: #fff;
          padding-top: 2px;
          padding-bottom: 2px;
          li{
            line-height: 39px;
            padding-left: 20px;
            a{
              color: #666666;
            }
            i{
              display: inline-block;
            }
          }
        }
      }
      .nav{
        margin-left: 225px;
        padding-bottom: 2px;
        li{
          width: 60px;
          padding: 0 20px;
          font-size: 18px;
          font-weight: bold;
          a{
            display: block;
            text-align: center;
            line-height: 53px;
          }
          &.active a{
            color: #2499ef;
            border-bottom: 2px solid #2499ef;
            margin-bottom: -2px;
          }
        }
      }
      .qrcode{
        width: 70px;
        right: 0;
        top: auto;
        bottom: 0;
      }
    }
  }
</style>
